<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">操作日志</div>
        <a-button type="primary">导出</a-button>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postOperLogPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'businessType'">
              <!-- <span></span> -->
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script setup>
import { postOperLogPage } from "@/api/system";
import { useStoreCommonEnum } from "@/store";
const storeCommonEnum = useStoreCommonEnum();
const queryOptions = ref([
  {
    name: "系统模块",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "title",
  },
  {
    name: "操作类型",
    type: "select",
    value: undefined,
    placeholder: "请输入",
    filed: "businessType",
    list: [
      {
        label: "新增",
        value: "1",
      },
      {
        label: "修改",
        value: "2",
      },
      {
        label: "删除",
        value: "3",
      },
    ],
  },
  {
    name: "账号",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "username",
  },
  {
    name: "用户名",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "nickname",
  },
  {
    name: "部门",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "deptId",
    async: async (record) => {
      record.list = await storeCommonEnum.getCommonEnum("department");
    },
  },
  {
    name: "职位",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "jobId",
    async: async (record) => {
      record.list = await storeCommonEnum.getCommonEnum("job");
    },
  },
  {
    name: "操作状态",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "operStatus",
    list: [
      {
        label: "成功",
        value: "0",
      },
      {
        label: "失败",
        value: "1",
      },
    ],
  },
  {
    name: "时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "系统模块",
    dataIndex: "title",
    key: "title",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "操作类型",
    dataIndex: "businessType",
    key: "businessType",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "账号/邮箱",
    dataIndex: "spaceName",
    key: "spaceName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "用户名/姓名",
    dataIndex: "username",
    key: "username",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "部门",
    dataIndex: "spaceName",
    key: "spaceName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "职位",
    dataIndex: "spaceName",
    key: "spaceName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "时间",
    fixed: "right",
    dataIndex: "createTime",
    key: "createTime",
    width: 160,
  },
];
const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};
</script>

<style lang="less" scoped></style>
